<template>
  <a-modal
    title="Title"
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    wrapClassName="portAreaPlanModal-container"
    width="1172px"
    :footer="null"
  >
    <div class="portAreaPlanModal-body">
      <div class="modal-header">
        <div class="left-icon"></div>
        <div class="name">{{ source.portName || "港区" }}规划图</div>
        <div class="close-button" @click="_handleClose()"></div>
      </div>
      <div class="modal-body">
        <div class="port-img" :class="imgFull && 'full'">
          <img :src="url" alt="" />
          <div class="full-button" @click="imgFull = !imgFull"></div>
        </div>
        <div class="port-desc">
          {{ remark }}
        </div>
      </div>
      <div class="modal-footer">
        <div class="button" @click="_handleIntoPort()">进入港区</div>
      </div>
    </div>
  </a-modal>
</template>
<script>
//港口规划图弹窗
export default {
  name: "PortAreaPlanModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    source: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { image, remark } = this.source;
          this.remark = remark;
          try {
            let img = JSON.parse(image);
            this.url = img?.[0]?.url ?? "";
          } catch (error) {}
        } else {
          setTimeout((_) => {
            this.url = "";
            this.remark = "";
          }, 500);
        }
      },
    },
  },
  data() {
    return {
      imgFull: false,
      url: "",
      remark: "",
    };
  },
  mounted() {},
  methods: {
    _handleIntoPort() {
      let { camDir, camPos, camRotate } = this.source;
      this.$parent.setCamLocateToPort({
        camDir: JSON.parse(camDir),
        camPos: JSON.parse(camPos),
        camRotate: JSON.parse(camRotate),
      });
      this._handleClose();
    },
    _handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.portAreaPlanModal-container {
  .ant-modal-header,
  .ant-modal-close {
    display: none;
  }
  .ant-modal-content {
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    .ant-modal-body {
      padding: 0 !important;
      .portAreaPlanModal-body {
        height: 800px;
        display: flex;
        flex-direction: column;
        background: rgba(1, 30, 38, 0.7);
        border: 1px solid rgba(142, 227, 251, 0.3);
        border-top: none;
        box-sizing: border-box;
        border-radius: 0 10px 0 0;
        .modal-header {
          height: 36px;
          flex-shrink: 0;
          background: yellow;
          background: linear-gradient(
            90deg,
            rgba(0, 167, 216, 0.7),
            rgba(0, 77, 99, 0)
          );
          position: relative;
          &::before {
            content: "";
            display: flex;
            width: 300px;
            height: 40px;
            background: url("~@/assets/img/portalEntry/modal_icon_1.png");
            position: absolute;
            left: 0;
            top: 0;
            background-size: 100% 100%;
          }
          &::after {
            content: "";
            display: flex;
            width: 75px;
            height: 36px;
            background: url("~@/assets/img/portalEntry/modal_icon_2.png");
            position: absolute;
            right: 0;
            top: 0;
            background-size: 100% 100%;
          }
          .left-icon {
            position: absolute;
            width: 21px;
            height: 36px;
            background: url("~@/assets/img/portalEntry/modal_icon_3.png");
            position: absolute;
            left: 0;
            top: 0;
            background-size: 100% 100%;
          }
          .close-button {
            position: absolute;
            width: 12px;
            height: 12px;
            background: url("~@/assets/img/portalEntry/modal_icon_4.png");
            position: absolute;
            right: 12px;
            top: 12px;
            background-size: 100% 100%;
            cursor: pointer;
            z-index: 9;
            &:hover {
              opacity: 0.5;
            }
          }
          .name {
            color: #fff;
            font-size: 18px;
            letter-spacing: 2px;
            position: relative;
            z-index: 9;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 16px;
          }
        }
        .modal-body {
          flex: 1;
          box-sizing: border-box;

          padding: 20px;
          .custom-scrollbar();
          overflow-x: hidden !important;
          display: flex;
          flex-direction: column;
          &::before {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            bottom: 0px;
            left: 0px;
            background: url("~@/assets/img/portalEntry/modal_icon_5.png");
            background-size: 100% 100%;
          }
          &::after {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            bottom: 0px;
            right: 0px;
            background: url("~@/assets/img/portalEntry/modal_icon_6.png");
            background-size: 100% 100%;
          }
          .port-img {
            flex-shrink: 0;
            height: 560px;
            background: rgba(1, 30, 38, 0.6);
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
            transition: 0.3s;
            &.full {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.5);
              .full-button {
                top: 10px !important;
              }
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
            .full-button {
              position: absolute;
              width: 40px;
              height: 40px;
              border-radius: 4px;
              right: 10px;
              bottom: 10px;
              transition: 0.3s;
              cursor: pointer;
              background: rgba(0, 0, 0, 0.6)
                url("~@/assets/img/portalEntry/modal_icon_8.png") center center
                no-repeat;
              background-size: 20px 20px;
            }
          }
          .port-desc {
            color: #b8e8ff;
            font-size: 16px;
            line-height: 32px;
          }
        }
        .modal-footer {
          height: 80px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          .button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 130px;
            height: 36px;
            font-size: 16px;
            background: url("~@/assets/img/portalEntry/modal_icon_7.png");
            background-size: 100% 100%;
            cursor: pointer;
          }
        }
      }
    }
  }
  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    overflow-x: overlay !important;
    overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.6);
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.1);
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none;
    }
  }
}
</style>
